<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>主题切换</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
    <style type="text/css">
        .theme-setting-box {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .theme-setting-box li {
            float: left;
            width: 33.3333333%;
            padding: 5px;
        }

        .theme-setting-box li a {
            display: block;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 3px rgb(0 0 0 / 40%);
            opacity: 0.6;
        }

        .theme-setting-box li a:hover {
            opacity: 1;
            cursor: pointer;
        }
    </style>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <ul class="theme-setting-box">
                <li>
                    <a data-theme="theme-blue|menu-dark">
                        <span style="float:left;width:20%;height: 20px;background-color: #2d8cf0;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #2d8cf0;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #222D39;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-green|menu-dark">
                        <span style="float:left;width:20%;height: 20px;background-color: #1dc5a3;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #1dc5a3;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #222D39;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-darkblue|menu-dark">
                        <span style="float:left;width:20%;height: 20px;background-color: #3963bc;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #3963bc;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #222D39;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-yellow|menu-dark">
                        <span style="float:left;width:20%;height: 20px;background-color: #ff9b07;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #ff9b07;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #222D39;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-red|menu-dark">
                        <span style="float:left;width:20%;height: 20px;background-color: #f56c6c;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #f56c6c;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #222D39;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-blue|menu-light">
                        <span style="float:left;width:20%;height: 20px;background-color: #2d8cf0;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #2d8cf0;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #ffffff;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-green|menu-light">
                        <span style="float:left;width:20%;height: 20px;background-color: #1dc5a3;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #1dc5a3;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #ffffff;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-darkblue|menu-light">
                        <span style="float:left;width:20%;height: 20px;background-color: #3963bc;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #3963bc;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #ffffff;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-yellow|menu-light">
                        <span style="float:left;width:20%;height: 20px;background-color: #ff9b07;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #ff9b07;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #ffffff;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
                <li>
                    <a data-theme="theme-red|menu-light|logo-dark">
                        <span style="float:left;width:20%;height: 20px;background-color: #f56c6c;"></span>
                        <span style="float:left;width:80%;height: 20px;background-color: #f56c6c;"></span>
                        <span style="float:left;width:20%;height: 60px;background-color: #ffffff;"></span>
                        <span style="float:left;width:80%;height: 60px;background-color: #f5f5f5;"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script>
        $(".theme-setting-box li a").click(function () {
            var theme = $(this).data("theme");
            if ($.common.isNotEmpty(theme)) {
                var themes = theme.split('|');
                var themeSkin = themes[0];
                var menuSkin = themes[1];
                if ($.common.isNotEmpty(themeSkin)) {
                    storage.set('theme-class', themeSkin);
                }
                if ($.common.isNotEmpty(menuSkin)) {
                    storage.set('menu-class', menuSkin);
                }
                loadTheme();
            } 
        });
    </script>
</body>

</html>